<div class="card">
    <h2>{{ data.name }} <span>.{{ data.className }}</span></h2>
    <div class="platforms">
        <template v-for="platform of data.platforms"  >
                <span @mouseover="peekPlatform=platform" @mouseout="peekPlatform=null">{{ platform }}</span> 
        </template>
    </div>
    <ul class="preview">
        <template v-for="size of sizes">
            <li :style="{ fontSize: size + 'px', fontFamily: fontFamily }">{{ text }}</li>
        </template>
    </ul>
    <div class="font-list">
        <template v-for="(font, index) in fonts"><span class="font" :style="{textDecoration: font.available ? 'underline' : 'none', color: highlightFonts.indexOf(font) > -1 ? '#DC143C' : '#333' }" @mouseout="peekFont=null" @mouseover="peekFont=font">{{ font.name }}</span><span v-if="index < fonts.length - 1">, </span></template>
    </div>
    <div>
        font-family: <template v-for="(font, index) in data.cssFontFamilies"><span :style="{color: highlightCssFontFamilies.indexOf(font) > -1 ? '#DC143C' : '#777'}">{{ font }}</span><span v-if="index < data.cssFontFamilies.length - 1">, </span></template>;
    </div>
    <ul class="notes">
        <li v-for="note of notes">> {{ note }}</li>
    </ul>
</div>